<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>



	<style>
		* {
			margin: 0;
			padding: 0;
			user-select: none;
		}

		#content {
			width: 100vw;
			height: 100vh;
			position: relative;
			background: #000;
			overflow: hidden;
		}

		#ys {
			position: fixed;
			width: 60px;
			height: 240px;
			right: 100px;
			top: 25%;
			transform: rotateY(180deg);
			border: 1px solid #ccc;
			padding: 30px;
			transition: all 1s linear;
			transform-style: preserve-3d;
			z-index: 200;
			border-radius: 20px 20px 20px 20px;
		}

		#ys::after {
			content: "";
			display: inline-block;
			width: 100%;
			height: 100%;
			background: #000;
			transform: translateZ(-1px);
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 20px 20px 20px 20px;
		}

		#ys div {
			margin-top: 10px;
			margin-left: 20px;
		}

		.x {
			width: 40px;
			height: 20px;
			background: #aaa;
			position: relative;
			border-radius: 0px 2px 2px 0px;
		}

		.x::after {
			content: "";
			display: inline-block;
			width: 20px;
			height: 20px;
			background: yellow;
			position: absolute;
			left: -50%;
			border-radius: 5px 0px 0px 5px;
		}

		.s {
			width: 40px;
			height: 20px;
			background: red;
			position: relative;
			border-radius: 0px 2px 2px 0px;
		}

		.s::after {
			content: "";
			display: inline-block;
			width: 20px;
			height: 20px;
			background: yellow;
			position: absolute;
			left: -50%;
			border-radius: 5px 0px 0px 5px;
		}

		#m {
			width: 100%;
			height: 100%;
			z-index: 1000;
			background: #fff;
			position: fixed;
			top: 0;
			left: 0;
			display: none;
		}

		#aaa {
			width: 40px;
			height: 40px;
			background: #fff;
			border-radius: 100px;
			box-shadow: 0px 0px 20px #ccc;
			position: absolute;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
			z-index: 2;
		}

		#loves {
			position: fixed;
			left: 0px;
			top: 0px;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		#lovea div {
			display: inline-block;
			width: 20px;
			height: 40px;
			background: purple;
			margin: 20px;
			border-radius: 50px;
			position: relative;
			transform: rotateZ(-30deg);
		}

		#loveb div {
			display: inline-block;
			width: 20px;
			height: 40px;
			background: red;
			margin: 20px;
			border-radius: 50px;
			position: relative;
			transform: rotateZ(-30deg);
		}

		#lovea div::after {
			content: "";
			display: inline-block;
			width: 20px;
			height: 40px;
			background: purple;
			border-radius: 50px;
			position: absolute;
			transform: rotateZ(65deg) translate(10px, -8px);
		}

		#loveb div::after {
			content: "";
			display: inline-block;
			width: 20px;
			height: 40px;
			background: red;
			border-radius: 50px;
			position: absolute;
			transform: rotateZ(65deg) translate(10px, -8px);
		}

		#lovea {
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: 1;
		}

		#loveb {
			position: fixed;
			bottom: 0px;
			left: 0px;
			z-index: 1;
		}


		#sd {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
		}

		#djs {
			z-index: 1000;
			width: 300px;
			height: 50%;
			position: fixed;
			left: 100px;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 20px 20px 20px 20px;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			border: 1px solid #ccc;
		}

		#djs>div {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		#djs>div>div {
			width: 24.3%;
			height: 49%;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #ccc;
			transition: all 0.5s;
			z-index: 1;
			overflow: hidden;
		}

		._0 {
			cursor: pointer;
		}

		._1 {
			cursor: pointer;
		}

		._2 {
			cursor: pointer;
		}

		._3 {
			cursor: pointer;
		}

		._4 {
			cursor: pointer;
		}

		.meimgdiv:hover {
			cursor: pointer;
			border: 1px dashed red !important;
			z-index: 100 !important;
		}

		.meimgdiv img {
			transition: all 1s;
		}

		.meimgdiv:hover img {
			cursor: pointer;
			box-shadow: 0px 0px 20px red inset;
			transform: scale(1.2);
			background: #000;
		}

		#djs>div>div>img {
			width: 80%;
			height: 80%;
		}

		#djsa {
			border-bottom: 1px solid red;
		}

		#djsb {
			border-top: 1px solid red;
		}

		img {
			-webkit-user-drag: none;
		}

		#robot {
			position: fixed;
			width: 80px;
			left: 50%;
			transform: translateX(-50%);
		}

		#robot img {
			width: 100%;
		}

		#message {
			width: 30%;
			height: 50px;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 0px 0px 0px 20px;
			position: fixed;
			right: 0;
			top: 0;
			overflow-y: scroll;
			z-index: 5000;
			padding: 20px;
		}

		#message::-webkit-scrollbar {
			background: red;
			width: 4px;
		}

		#message::-webkit-scrollbar-thumb {
			background: #fff;
			width: 4px;
		}

		#message p:first-child {
			margin-top: 0px !important;
		}

		#message p {
			color: #fff;
			margin-top: 20px;
		}
	</style>
	<body>
		<div class="content" style="display: none;">

			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>

			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>

			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>

			<div class="text">GAME<br>OVER</div>

		</div>


		<div id="content">
			<div id="robot"><img src="img/xc1.png" alt="" id="xcs"></div>
			<div id="message">
			</div>
			<div id="m"></div>
			<div id="djs">
				<div id="djsa">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div id="djsb">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<div id="ys">
			</div>
			<div id="sd">
				<div id="aaa"></div>
			</div>
			<div id="lovea">
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id="loveb">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
	<script>
		sload();

		function sload() {
			var f, time, times;
			var content = document.getElementById("content");
			var m = document.getElementById("m");
			var ys = document.getElementById("ys");
			var lovea = document.getElementById("lovea");
			var loveb = document.getElementById("loveb");
			var djs = document.getElementById("djs");
			var message = document.getElementById("message");
			var xcs = document.getElementById("xcs");
			var stylesattr;
			var djimg = {
					0: "img/jp.png",
					1: "img/yh.png",
					2: "img/sk.png",
					3: "img/xd.png",
					4: "img/fdj.png"
				},
				djinglen = 5;
			var wan = [2, 2],
				wans = 0,
				gk = 0;
			var arrz = {
					"1": {
						"1": [1, 0],
						"2": [1, 0, 0],
						"3": [1, 0, 0, 0]
					},
					"2": {
						"1": [1, 0, 0],
						"2": [1, 1, 0],
						"3": [1, 1, 0, 0],
						"4": [1, 1, 1, 0, 0, 0],
						"5": [1, 1, 0, 0, 0],
						"6": [1, 1, 1, 1, 0, 0, 0, 0],
						"7": [1, 1, 1, 1, 0, 0],
						"8": [1, 1, 1, 1, 1, 0, 0]
					},
					"3": {
						"1": [1, 0],
						"2": [1, 1, 0, 0],
						"3": [1, 1, 1, 0, 0],
						"4": [1, 1, 0, 0, 0],
						"5": [1, 1, 1, 1, 0, 0, 0, 0],
						"6": [1, 1, 0, 0, 0, 0],
						"7": [1, 1, 1, 0, 0, 0, 0],
						"8": [1, 1, 1, 0, 0, 0],
						"9": [1, 1, 1, 1, 0, 0, 0],
						"10": [1, 0]
					}
				},
				arrLevel = 1,
				arrLevelJudge = [3, 8, 10],
				arrLevels = 1,
				arrLevelsLen = 0,
				arrs = arrz[arrLevel][arrLevels];
			var msindex = 1;

			function addmessage(msg, clr) {
				var mss = message.innerHTML;
				message.innerHTML = `<p style="color:${clr}">${msindex} - ${msg}</p>`;
				message.innerHTML += mss;
				msindex++;
			}

			function arrlevelfun() {
				arrs = arrz[arrLevel][arrLevels];
				ys.innerHTML = "";
				for (var i = 0; i < arrs.length; i++) {
					ys.innerHTML += `<div class='${arrs[i]==0?"x":"s"}'></div>`;
				}
				for (var i = 0; i < arrs.length + 10; i++) {
					var rdm = Math.floor(Math.random() * arrs.length)
					arrs.push(arrs[rdm])
					arrs.splice(rdm, 1)
				}

				// arrs.sort(function() {
				// 	return 0.5 - Math.random()
				// });
				// console.log(arrz[arrLevel][arrLevels], arrz, arrLevel, arrLevels);
				clearInterval(f);
				f = setInterval(function() {
					clearInterval(f);
					ys.style.transform = "rotateY(180deg)";
				}, 4000);
			}
			arrlevelfun();
			ys.style.transform = "rotateY(0deg)";
			clearInterval(f);
			f = setInterval(function() {
				clearInterval(f);
				ys.style.transform = "rotateY(180deg)";
			}, 2000);
			var time, times;

			function shan() {
				m.style.display = "inline-block";
				var opaca = 1,
					opacb = 1;
				clearInterval(time);
				clearInterval(times);
				times = setInterval(function() {
					clearInterval(times);
					time = setInterval(function() {
						m.style.background = "radial-gradient(rgba(255,255,255," + opaca +
							"),rgba(255,255,255," + opacb +
							"))";
						if (opaca > 0) {
							opaca -= 0.01;
						}
						if (opacb > 0 && opaca < (1 / 10)) {
							opacb -= 0.01;
						}
						if (opaca <= 0 && opacb <= 0) {
							m.style.display = "none";
							m.style.background = "#fff";
							djs.style.zIndex = "1000";
							clearInterval(time);
						}
					}, 10)
				}, 500)
			}

			var a = document.getElementById("aaa"),
				ax, ay, time, time2;
			var x, y, tempx, tempy;
			var dx = document.documentElement.clientWidth,
				dy = document.documentElement.clientHeight;
			var bx, by, bbx, bby, bw = 80,
				bh = 80;
			sd.onmouseup = function(e) {
				clearInterval(time);
				clearInterval(time2);
				bw = 40;
				bh = 40;
				onmousemove = function(e) {}
				x = e.pageX;
				y = e.pageY;
				time = setInterval(aaaa, 25);
			}

			function aaaa() {
				ax = a.offsetLeft;
				ay = a.offsetTop;
				tempx = (x - ax) / 10;
				tempy = (y - ay) / 10;
				ax += tempx > 0 ? Math.ceil(tempx) : Math.floor(tempx);
				ay += tempy > 0 ? Math.ceil(tempy) : Math.floor(tempy);
				a.style.left = ax + tempx + "px";
				a.style.top = ay + tempy + "px";
				if (ax == x && ay == y) {
					clearInterval(time);
					clearInterval(time2);
					if (a.offsetTop < 100) {
						kaiqiangjudge();
					} else if (a.offsetTop > dy - 100) {
						kaiqiangjudge();
					}
				}
			}

			function onrelove() {
				lovea.innerHTML = "";
				loveb.innerHTML = "";
				for (var i = 0; i < wan[0]; i++) {
					lovea.innerHTML += "<div></div>";
				}
				for (var i = 0; i < wan[1]; i++) {
					loveb.innerHTML += "<div></div>";
				}
			}

			function oefun() {
				onrelove();
				if (wan[0] <= 0) {
					if (gk >= 2) {
						// console.clear();
						clearInterval(f);
						clearInterval(time);
						clearInterval(times);
						m.style.background = "greenyellow";
						document.querySelector("head").innerHTML += stylesattr;
						document.querySelector(".content").style.display = "flex";
						addmessage("GAME WIN,玩家-胜,拿走一千万美金!!!", "greenyellow");
					} else {
						gkfun();
					}
				} else if (wan[1] <= 0) {
					clearInterval(f);
					clearInterval(time);
					clearInterval(times);
					shan();
					m.style.background = "#000";
					document.querySelector("head").innerHTML += stylesattr;
					document.querySelector(".content").style.display = "flex";
					addmessage("GAME OVER,玩家-失败,永久关入大牢!!!", "red");
				}
			}
			oefun();
			var djarra = [],
				djindexa = 0,
				djarrb = [],
				djindexb = 0;
			var dbat = 0;
			var djsa = document.getElementById("djsa");
			var djsadiv = djsa.querySelectorAll("div");
			var djsb = document.getElementById("djsb");
			var djsbdiv = djsb.querySelectorAll("div");

			function djdbclick() {
				for (var djb = 0; djb < djsbdiv.length; djb++) {
					if (djsbdiv[djb].className != "") {
						djsbdiv[djb].ondblclick = function() {
							switch (this.className[1]) {
								case "0":
									if (arrs[0] == 1) {
										addmessage("[GAME系统提示][玩家]弹出一个实弹，还剩" + (arrs.length - 1) + "颗子弹", "red");
									} else {
										addmessage("[GAME系统提示][玩家]弹出一个虚弹，还剩" + (arrs.length - 1) + "颗子弹", "#fff");
									}
									arrs.shift();
									this.innerHTML = "";
									this.className = "";
									break;
								case "1":
									if (wan[1] == 4 && gk == 1) {
										addmessage("[报告][玩家]到达血量上限 -4- 不能使用", "yellow");
									} else if (wan[1] == 6 && gk == 2) {
										addmessage("[报告][玩家]到达血量上限 -6- 不能使用", "yellow");
									} else {
										wan[1] += 1;
										this.innerHTML = "";
										this.className = "";
										onrelove();
									}
									break;
								case "2":
									addmessage("[效果][玩家]增加一回合", "aqua");
									this.innerHTML = "";
									this.className = "";
									break;
								case "3":
									if (dbat == 0) {
										dbat = 1;
									} else {
										addmessage("[报告][玩家]当前伤害已经翻倍", "yellow");
									}
									a.style.background = "yellow";
									this.innerHTML = "";
									this.className = "";
									break;
								case "4":
									if (arrs[0] == 1) {
										a.style.background = "red";
									} else {
										a.style.background = "#666";
									}
									this.innerHTML = "";
									this.className = "";
									break;
							}
						};
					}

					if (djsadiv[djb].className != "") {
						djsadiv[djb].ondblclick = function() {
							switch (this.className[1]) {
								case "0":
									if (arrs[0] == 1) {
										addmessage("[GAME系统提示][Robot]弹出一个实弹，还剩" + (arrs.length - 1) + "颗子弹", "red");
									} else {
										addmessage("[GAME系统提示][Robot]弹出一个虚弹，还剩" + (arrs.length - 1) + "颗子弹", "#fff");
									}
									arrs.shift();
									this.innerHTML = "";
									this.className = "";
									break;
								case "1":
									if (wan[0] == 4 && gk == 1) {
										addmessage("[报告][Robot]到达血量上限 -4- 不能使用", "yellow");
									} else if (wan[0] == 6 && gk == 2) {
										addmessage("[报告][Robot]到达血量上限 -6- 不能使用", "yellow");
									} else {
										wan[0] += 1;
										this.innerHTML = "";
										this.className = "";
										onrelove();
									}
									break;
								case "2":
									addmessage("[效果][Robot]增加一回合", "aqua");
									this.innerHTML = "";
									this.className = "";
									break;
								case "3":
									if (dbat == 0) {
										dbat = 1;
									} else {
										addmessage("[报告][Robot]当前伤害已经翻倍", "yellow");
									}
									a.style.background = "yellow";
									this.innerHTML = "";
									this.className = "";
									break;
								case "4":
									if (arrs[0] == 1) {
										a.style.background = "red";
									} else {
										a.style.background = "#666";
									}
									this.innerHTML = "";
									this.className = "";
									break;
							}
						};
					}
				}
			}
			// 技能
			function djxr() {
				djindexa = 0;
				djindexb = 0;
				for (var dja = 0; dja < djsadiv.length; dja++) {
					if (djsadiv[dja].className != "") {
						continue;
					} else {
						djsadiv[dja].innerHTML = `<img src="${djimg[djarra[djindexa]]}" alt="">`;
						djsadiv[dja].className = "_" + djarra[djindexa++];
					}
					if (djindexa == djarra.length) {
						break;
					}
				}
				if (djindexa != djarra.length) {
					addmessage("[Robot]道具槽已满", "aqua");
				}
				for (var djb = 0; djb < djsbdiv.length; djb++) {
					if (djsbdiv[djb].className != "") {
						continue;
					} else {
						djsbdiv[djb].innerHTML = `<img src="${djimg[djarrb[djindexb]]}" alt="">`;
						djsbdiv[djb].className = "_" + djarrb[djindexb++];
					}
					if (djindexb == djarrb.length) {
						break;
					}
				}
				if (djindexb != djarrb.length) {
					addmessage("[玩家]道具槽已满", "aqua");
				}
				djdbclick();
			}

			function sjdj(xs) {
				djarra = [];
				djarrb = [];
				for (var dj = 0; dj < xs; dj++) {
					djarra.push(parseInt(Math.random() * 5));
					djarrb.push(parseInt(Math.random() * 5));
				}
				djxr();
			}

			function gkfun() {
				if (gk == 0) {
					addmessage("一阶段结束，进入第二阶段", "darkred");
					xcs.src = "img/xc2.png";
					gk++;
					wan = [4, 4];
					arrLevels = 1;
					arrLevel++;
					arrLevelsLen++;
					ys.style.transform = "rotateY(0deg)";
					sjdj(2);
				} else if (gk == 1) {
					addmessage("二阶段结束，进入最后阶段", "purple");
					xcs.src = "img/xc3.png";
					gk++;
					wan = [6, 6];
					arrLevels = 1;
					arrLevel++;
					arrLevelsLen += 1;
					ys.style.transform = "rotateY(0deg)";
					sjdj(4);
				}
				arrlevelfun();
				oefun();
			}

			function kaiqiangjudge() {
				a.style.background = "#fff";
				if (arrs[0] == 1) {
					if (a.offsetTop < 100) {
						wan[0] -= 1 + dbat;
					} else if (a.offsetTop > dy - 100) {
						wan[1] -= 1 + dbat;
					}
					dbat = 0;
					a.style.left = "50%";
					a.style.top = "50%";
					shan();
					djs.style.zIndex = "100";
					addmessage("[实弹] 枪膛内还剩" + (arrs.length - 1) + "颗子弹", "red");
				} else {
					a.style.left = "50%";
					a.style.top = "50%";
					addmessage("[空弹] 枪膛内还剩" + (arrs.length - 1) + "颗子弹", "#fff");
				}
				arrs.shift();
				if (arrs.length == 0) {
					arrLevels++;
					// if (arrLevels == arrLevelJudge[arrLevelsLen]) {
					// 	arrLevels = 1;
					// 	arrLevel++;
					// 	arrLevelsLen += 1;
					// 	console.log("a");
					// }
					addmessage("回合结束", "yellow");
					ys.style.transform = "rotateY(0deg)";
					if (gk == 1) {
						sjdj(2);
					}
					if (gk == 2) {
						sjdj(4);
					}
					arrlevelfun();
				}
				oefun();
			}
			stylesattr = `<style>
		  @import url("https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap");
		  
		  body {
		  	margin: 0;
		  	font-family: Arial, Helvetica, sans-serif;
		  	box-sizing: border-box;
		  	width: 100vw;
		  	height: 100vh;
		  	background: radial-gradient(circle at 50% 125%, #181818 0%, #0000 30%),
		  		radial-gradient(circle at 50% -25%, #181818 0%, #0000 30%), #000;
		  	overflow: hidden;
		  }
		  
		  .content {
		  	width: 100vw;
		  	height: 100vh;
		  	display: flex;
		  	justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 4000;
		  }
		  
		  .col {
		  	width: 3vmax;
		  	height: 0;
		  	position: relative;
		  	box-sizing: border-box;
		  	margin: 0;
		  	float: left;
		  	border-radius: 0 0 3vmax 3vmax;
		  	margin-top: -2vmin;
		  	background: #9f0000;
		  	animation: drop 5s cubic-bezier(0.34, 0.03, 0.76, 0.94) 0s;
		  	animation-fill-mode: forwards;
		  	box-shadow: 0 0 2px 1px #9f0000;
		  	/*animation-play-state: paused;*/
		  }
		  
		  .col:before {
		  	content: "";
		  	background: #9f0000;
		  	width: calc(100% + 0.2vmin);
		  	height: 3vmax;
		  	position: absolute;
		  	bottom: -0.15vmin;
		  	border-radius: 0 100% 100% 100%;
		  	left: -0.1vmin;
		  	transform: rotate(35deg);
		  }
		  
		  .col:after {
		  	content: "";
		  	width: 2.25vmax;
		  	height: 2.25vmax;
		  	position: absolute;
		  	border-radius: 100%;
		  	right: 0.25vmax;
		  	bottom: 0.25vmax;
		  	border: 0.25vmax solid #ffffff00;
		  	border-bottom-color: #ffffff50;
		  	transform: rotate(-65deg);
		  	filter: blur(1px) drop-shadow(0 0 5px #fff);
		  	opacity: 0.5;
		  }
		  
		  .col:nth-child(2) {
		  	animation-delay: 0.5s;
		  	animation-duration: 6s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(3) {
		  	animation-delay: 0.7s;
		  	animation-duration: 4s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(4) {
		  	animation-delay: 0.75s;
		  	animation-duration: 6.17s;
		  }
		  
		  .col:nth-child(5) {
		  	animation-delay: 1.15s;
		  	animation-duration: 4.5s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(6) {
		  	animation-delay: 0.65s;
		  	animation-duration: 5.5s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(7) {
		  	animation-delay: 0.85s;
		  	animation-duration: 5.75s;
		  }
		  
		  .col:nth-child(8) {
		  	animation-delay: 1.05s;
		  	animation-duration: 5.16s;
		  }
		  
		  .col:nth-child(9) {
		  	animation-delay: 0.15s;
		  	animation-duration: 4.25s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(10) {
		  	animation-delay: 0.45s;
		  	animation-duration: 4.75s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(11) {
		  	animation-delay: 0.25s;
		  	animation-duration: 4.5s;
		  }
		  .col:nth-child(12) {
		  	animation-delay: 0.45s;
		  	animation-duration: 5.35s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(13) {
		  	animation-delay: 0.625s;
		  	animation-duration: 4.15s;
		  }
		  
		  .col:nth-child(14) {
		  	animation-delay: 0.25s;
		  	animation-duration: 4.38s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(15) {
		  	animation-delay: 0.45s;
		  	animation-duration: 6.035s;
		  }
		  
		  .col:nth-child(16) {
		  	animation-delay: 0.145s;
		  	animation-duration: 4.35s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(17) {
		  	animation-delay: 0.75s;
		  	animation-duration: 4.65s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(18) {
		  	animation-delay: 0.325s;
		  	animation-duration: 3.85s;
		  }
		  
		  .col:nth-child(19) {
		  	animation-delay: 0.15s;
		  	animation-duration: 4.75s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(20) {
		  	animation-delay: 0.33s;
		  	animation-duration: 5.05s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(21) {
		  	animation-delay: 0.133s;
		  	animation-duration: 5.95s;
		  }
		  
		  .col:nth-child(22) {
		  	animation-delay: 0.73s;
		  	animation-duration: 4.44s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(23) {
		  	animation-delay: 0.55s;
		  	animation-duration: 5.05s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(24) {
		  	animation-delay: 0.66s;
		  	animation-duration: 6.05s;
		  }
		  
		  .col:nth-child(25) {
		  	animation-delay: 0.33s;
		  	animation-duration: 3.95s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(26) {
		  	animation-delay: 0.525s;
		  	animation-duration: 4.65s;
		  }
		  
		  .col:nth-child(27) {
		  	animation-delay: 0.225s;
		  	animation-duration: 4.95s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(28) {
		  	animation-delay: 0.99s;
		  	animation-duration: 3.575s;
		  	width: 3.35vmax;
		  }
		  
		  .col:nth-child(29) {
		  	animation-delay: 0.88s;
		  	animation-duration: 4.35s;
		  	width: 4vmax;
		  }
		  
		  .col:nth-child(30) {
		  	animation-delay: 0.77s;
		  	animation-duration: 5.15s;
		  }
		  
		  @keyframes drop {
		  	0% {
		  		height: 0%;
		  	}
		  	100% {
		  		height: calc(100% + 6vmax);
		  	}
		  }
		  
		  .text {
		  	text-align: center;
		  	font-family: "Trade Winds", Arial, Helvetica, serif;
		  	position: absolute;
		  	font-size: 20vmin;
		  	font-weight: bold;
		  	height: 100%;
		  	display: flex;
		  	align-items: center;
		  	justify-content: center;
		  	/*mix-blend-mode: overlay;*/
		  	opacity: 0.95;
		  	text-shadow: -2px -2px 2px #0000006b;
		  	-webkit-text-stroke: 2.25vmin #0000004d;
		  	-webkit-text-fill-color: #000000;
		  }
		  
		  @media only screen and (orientation: portrait) {
		  	.col:before {
		  		height: 3vmin;
		  	}
		  }
	</style>`;
		}
	</script>











	<script>

	</script>
</html>